<template>
  <div class="app">
    <div class="picker">
        <div class="search">
            <div class="date">
                <div class="block">
                    <span class="demonstration">发布日期：</span>
                    <el-date-picker
                    type="date"
                    placeholder="选择日期"
                    />
                </div>
            </div>
            <div class="type">
                类型：
                <el-select  class="m-2" placeholder="请选择">
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                />
                </el-select>
            </div>
            <div class="btns">
                <el-row class="mb-4">
                    <el-button type="primary">查询</el-button>       
                    <el-button>重置</el-button>
                </el-row>
            </div> 

        </div>    
  </div>
  <!-- 列表区域 -->
  <div class="list">
    <!-- //发布通知按钮 -->
    <div class="btn">
        <el-row class="mb-4">       
            <el-button type="primary" @click="$router.push('/index/family-schoolInteraction/repairadd')">+设备报修</el-button>
        </el-row>
    </div>
    <!-- 图表 -->
    <el-table :data="$store.tableData" stripe style="width: 100% ;" :border="true" type="index" :cell-style="cellStyle">
        <el-table-column  type="index" width="100" label="序号" align="center"></el-table-column>
        <el-table-column prop="content" label="内容" width="270" align="center" style="color:blue"/>
        <el-table-column prop="accepter" label="受理人" width="120" align="center"/>
        <el-table-column prop="name" label="报修人" width="120"  align="center"/>
        <el-table-column prop="data" label="发送时间" width="210"  align="center"/>
        <el-table-column prop="status" label="状态" width="110"  align="center" />
         <!-- 删除按钮 -->
        <el-table-column fixed="right" label="操作" width="110"  align="center">
            <template #default="scope">
                <el-button link type="primary" size="small" v-if="scope.row.status=='待受理'" @click.prevent="acceptRow(scope.row)">受理</el-button>
                <el-button link type="primary" size="small"  v-if="scope.row.status=='已受理'" @click.prevent="checkRow(scope.row)">验收</el-button>
                <el-button link type="primary" size="small"  v-if="scope.row.status=='待验收'" @click.prevent="checkRow(scope.row)">验收</el-button>
                <el-button link type="primary" size="small"  @click.prevent="deleteRow(scope.row)" v-show="scope.row.status=='已验收'">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
  </div>
  </div>
</template>

<script setup>
import {useRepairListStore} from '../../../stores/repairlist'
import { onMounted } from 'vue';
import {ref} from 'vue'
const options = [
  {
    value: '待受理',
    label: '待受理',
  },
  {
    value: '待验收',
    label: '待验收',
  },
  {
    value: '已验收',
    label: '已验收',
  }
]

//获取仓库数据
let $store=useRepairListStore();
onMounted(()=>{  
    if($store.tableData.length!=0){
    }else{
         $store.save_tableData()
    }        
})

//删除数据
let deleteRow=(item)=>{
    console.log('删除执行了')
    $store.del_tableData(item.id)  
}
//受理设备
let acceptRow=(item)=>{
   let index= $store.tableData.find((element)=>{
       return element.id==item.id
    })
    index.status='待验收'
}
//验收设备
let checkRow=(item)=>{
   let index= $store.tableData.find((element)=>{
       return element.id==item.id
    })
    index.status='已验收'
}
//更改字体颜色
let cellStyle=({row,column,rowIndex,columnIndex})=>{
    if(columnIndex===1){
        return{
            'text-decoration':'underline',
            color:'rgba(24,144,255,1)'
    }
    };
    if(row.status==='已验收'&&columnIndex===5){
        return{
            color:'yellowgreen'
    };
    }else if(row.status==='待受理'&&columnIndex===5){
        return{
            color:'red'
    }
    }
   
}
</script>

<style scoped>
.app{
padding: 20px;
    background-color: #f7f7f7;
}
.ch{
    display: flex;
    align-items: center;
}
.search{
    width: 100%;
    height: 140px;
    display: flex;
    background-color: white;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 40px;
  }
.search input{
    height: 30px;
    border-radius: 5px;
    outline: none;
    border: 1px solid #cccccc;
}
.list{
    background-color: white;
    margin-top: 20px;
    box-sizing: border-box;
    padding: 0px 50px 0px;
    text-align: center;
   padding-bottom: 200px;
}
.btn{
  display: flex;
  justify-content: flex-end;
  height: 80px;
  align-items: center;
}
</style>